<html>
    <head>
        <title>Create a new game</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no, width = 320">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" href="/style.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <style>
            p                { font-size:20px; }
            label            { font-size:20px; font-weight:bold; }

            select, input    { margin:5px 0 5px 0; font-size:20px; padding:5px; }
            select, input[type=text] { width:270px; }

            div#caption      { margin-top:20px; }
            div#caption h1   { position:relative; top:-10px; margin-left:10px; display:inline; }

            div#game_name       { margin-top:25px; }
            div#game_name label { display:block; }

            div#location        { margin-top:25px; }
            div#location label  { display:block; }

            div#btn_new         { margin-top:40px; }
            
        </style>
        <div id="frame_main">
            <div id="border_1">
                <div id="border_2">
                    <div id="caption">
                        <img src="/images/logo_pacman.png" title="logo"/>
                        <h1>Create a new game</h1>
                    </div>

                    <div id="game_name">
                        <label for="game_name">Game name:</label>
                        <input id="game_name" type="text" name="game_name" value=""/>
                    </div>

                    <div id="location">
                        <label for="game_location">Select location:</label>
                        <select id="game_location" name="game">
                            <option value="-1">Tel Aviv center</option>
                        </select>
                    </div>

                    <div id="btn_new" align="center">
                        <img src="/images/btn_new.png"/>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function new_game_error(XMLHttpRequest, textStatus, errorThrown) { 
                alert('Could not create game');
            }

            function new_game_done(data) {
                console.log('Created new game: ' + data);
                window.location.href='join_game.html?game_name=' + $("input#game_name").val();
            }

            function new_game() {
                var game_name = $("input#game_name").val();
                if (!game_name) {
                    alert('Enter game name');
                    return false;
                }

                console.log("Create new game: " + game_name);

                $.ajax({
                    url: "http://tlvivi.co.il/CreateGame.ashx?jsoncallback=?", 
                    dataType: "jsonp",
                    data: { "Name": game_name },
                    jsonpString: "jsoncallback",
                    error: new_game_error,
                    success: new_game_done,
                });
            }

            $(document).ready(function() {
                $("#info").ajaxError(function(event, request, settings){
                    $(this).html("<li>Error requesting page " + settings.url + "</li>");
                });
                    
                console.log("Start..");
                $("#btn_new").click(new_game);
            });
        </script>
    </body>
</html>


